<template>
    <n-drawer :show="active" :width="width" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content :native-scrollbar="false" title="详情" closable>
            <n-space vertical :size="32">
                <n-descriptions label-placement="left" title="基本信息" bordered :column="1">
                    <n-descriptions-item :label-style="labelStyle" label="ID">
                        <n-text code>{{ item.id }}</n-text>
                    </n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="模板名称">{{ item.name }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="模板代码" v-if="item.code">{{ item.code }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="模板简介">{{ item.memo }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="使用说明">{{ item.desc }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="可用区域">{{ item.areas.map((area:any) => area.name).join(" ") || '全国' }}</n-descriptions-item>
                </n-descriptions>

                <n-descriptions label-placement="left" title="优惠配置" bordered :column="1">
                    <n-descriptions-item :label-style="labelStyle" label="优惠方式">{{ item.type === 1 ? '固定金额' : '动态比例' }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="最低消费" v-if="item.min > 0">{{ Filters.money(item.min) }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="优惠金额" v-if="item.type === 1">{{ Filters.money(item.cash) }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="优惠比例" v-if="item.type === 2">{{ Filters.percent(item.dis) }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="最大抵扣" v-if="item.type === 2 && item.max > 0">{{ Filters.money(item.max) }}</n-descriptions-item>
                </n-descriptions>

                <n-descriptions label-placement="left" title="有效期配置" bordered :column="1">
                    <n-descriptions-item :label-style="labelStyle" label="计算方式">{{ item.validity.fixed ? '固定日期' : '动态天数' }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="生效日期" v-if="item.validity.fixed">{{ item.validity.indate }} 至{{ item.validity.expire }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="有效天数" v-if="!item.validity.fixed">{{ item.validity.days }}</n-descriptions-item>
                </n-descriptions>

                <n-descriptions label-placement="left" title="领取配置" bordered :column="1">
                    <n-descriptions-item :label-style="labelStyle" label="用户领取">{{ item.uget.flag ? '允许领取' : '禁止领取' }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="发放数量" v-if="item.total > 0">最大发放{{ item.total }}张</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="领取限制">
                        每用户每天领取{{ item.uget.day > 0 ? item.uget.day + '张' : '不限制' }}，累计领取{{ item.uget.max > 0 ? item.uget.max + '张' : '不限制' }}
                    </n-descriptions-item>
                </n-descriptions>
            </n-space>
            <template #footer>
                <n-space justify="end">
                    <n-button type="tertiary" @click="() => (active = false)">
                        <template #icon>
                            <n-icon :component="CloseRound" />
                        </template>
                        关闭
                    </n-button>
                </n-space>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { CloseRound } from '@vicons/material'
import { Filters } from '@/libs'
import { useStore } from '@/store'

const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.4, 640))

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
    item: {
        type: Object,
        required: true,
    },
})

const labelStyle = {
    width: '150px',
}

const emit = defineEmits(['update:show'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})
</script>
